<!doctype html>
<canvas id="canvas" style="border: 1px solid red;"></canvas>

<script>
/*jshint browser:true*/

var BLANK_IMG =
  ''

var canvas = document.getElementById('canvas')
  , g = canvas.getContext('2d')

var ws = new WebSocket('ws://localhost:9002', 'minicap')
ws.binaryType = 'blob'

ws.onclose = function() {
  console.log('onclose', arguments)
}

ws.onerror = function() {
  console.log('onerror', arguments)
}

ws.onmessage = function(message) {
  var blob = new Blob([message.data], {type: 'image/jpeg'})
  var URL = window.URL || window.webkitURL
  var img = new Image()
  img.onload = function() {
    console.log(img.width, img.height)
    canvas.width = img.width
    canvas.height = img.height
    g.drawImage(img, 0, 0)
    img.onload = null
    img.src = BLANK_IMG
    img = null
    u = null
    blob = null
  }
  var u = URL.createObjectURL(blob)
  img.src = u
}

ws.onopen = function() {
  console.log('onopen', arguments)
  ws.send('1920x1080/0')
}

</script>
